<template>
  <div class="sign-panel">
    <el-tabs v-model="activeTab" class="sign-tabs">
      <el-tab-pane label="签名" name="sign">
        <div class="sign-row" style="margin-top: 10px;">
          <span class="sign-label">签字</span>
          <div class="sign-upload" >
           
            <div class="sign-preview" v-if="signUrl">
              <img class="sign-img"  :src="signUrl" />
            </div>
             <div class="sign-upload-box"  v-else>
              <div class="sign-upload-text">请上传签名</div>
            </div>
            <span class="sign-btn" style="margin-left: 20px;cursor: pointer;color:var(--color-primary)" type="text" @click="editSign">手写</span>
            <span class="sign-btn" style="margin-left: 20px;cursor: pointer;color:var(--color-primary)" type="text" @click="uploadSign">上传</span>

            <input
              ref="fileInput"
              type="file"
              accept="image/*"
              style="display: none"
              @change="onFileChange"
            />
          </div>
        </div>
         
      </el-tab-pane>
      <el-tab-pane label="药品" name="drug">
        <div style=" color: #bbb; text-align: center">
          <SignTable />
        </div>
      </el-tab-pane>
  </el-tabs>
    <HandSignBoard v-model="isModelValue" @confirm="handleConfirm" />
  </div>
</template>

<script setup lang="ts">
import SignTable from './SignTable.vue';
import { ref } from 'vue';
import {getEmpSignature,updateSignature} from '@/api/individual';
import { base64Upload} from '@/api/account';
const activeTab = ref('sign');
const signUrl = ref('');
const fileInput = ref<HTMLInputElement | null>(null);
const isModelValue = ref(false);

const uploadSign = () => {
  fileInput.value?.click();
};

const onFileChange = (e: Event) => {
  const files = (e.target as HTMLInputElement).files;
  if (files && files[0]) {
    const reader = new FileReader();
    reader.onload = (ev) => {
      signUrl.value = ev.target?.result as string;
       base64Upload({
        baseStr: signUrl.value,
        isCompress: '0',
      }).then((res) => {
        if(res.code === '200'){
          updateSignature({
            signature: res.data,
          }).then((ress) => {
            if (ress.code === '200') {
              getEmpSignatureApi()
              ElMessage({
                message:ress.msg,
                type: 'success',
                duration: 2000,
              })
              
            }else{
              // ElMessage({
              //   message:ress.msg,
              //   type: 'success',
              //   duration: 2000,
              // })
            }
          });
        }else{

        }   
      });


    };
    reader.readAsDataURL(files[0]);
  }
};
const handleConfirm = (dataUrl: string) => {
  signUrl.value = dataUrl;

  base64Upload({
    baseStr: dataUrl,
    isCompress: 'true',
  }).then((res) => {
    if(res.code === '200'){
      updateSignature({
        signature: res.data,
      }).then((ress) => {
        if (ress.code === '200') {
          getEmpSignatureApi()
          ElMessage({
            message:ress.msg,
            type: 'success',
            duration: 2000,
          })
        }else{

        }
      });
    }else{
      // ElMessage({
      //   message:res.msg,
      //   type: 'success',
      //   duration: 2000,
      // })
    }   
  });
  isModelValue.value = false;
};

const getEmpSignatureApi = () => {
  getEmpSignature().then((res) => {
    if (res.code === '200') {
      signUrl.value = res.data.signature;
    }
  });
};
getEmpSignatureApi()
const editSign = () => {
  isModelValue.value = true;
};
</script>

<style scoped>
.sign-panel {
  background: #fff;
  border-radius: 8px;
  min-height: 600px;
}
.sign-tabs {
  --el-tabs-header-height: 48px;
  --el-tabs-header-bg-color: #fff;
  --el-tabs-active-color: #18b3ab;
  --el-tabs-header-font-size: 18px;
  --el-tabs-header-font-weight: 600;
  --el-tabs-header-border-bottom: 1px solid #e4e7ed;
}
.sign-row {
  display: flex;
  align-items: flex-start;
  margin-left: 60px;
}
.sign-label {
  font-size: 16px;
  color: #666;
  margin-top: 12px;
  flex-shrink: 0;
}
.sign-upload {
  margin-left: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sign-upload-box {
width: 200px;
height: 80px;
  background: #f5f7fa;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1.5px dashed #e4e7ed;
  transition: border 0.2s;
}
.sign-upload-box:hover {
  border: 1.5px solid #18b3ab;
}
.sign-upload-text {
  color: #bbb;
  font-size: 15px;
  margin-top: 8px;
}
.sign-preview {
  display: flex;
  align-items: center;
  margin-left: 12px;
}
.sign-img {
width: 200px;
height: 80px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #e4e7ed;
  margin-right: 18px;
}
.sign-btn {
  font-size: 15px;
  color: #18b3ab;
  cursor: pointer;
  border: none;
}
::v-deep(.el-tabs__item) {
  width: 110px !important; /* 设置每个tab的宽度 */
  padding: 0 !important; /* 去除默认padding */
  font-size: 16px !important; /* 设置字体大小 */
}
::v-deep(.el-tabs__nav-wrap:after) {
  height: 1px !important;
}
</style>
